<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="top-fl">
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.parkname"
              placeholder="车位名称"
              style="min-width: 19vw"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              size="medium"
              v-model="formInline.orderpay"
              placeholder="应缴金额"
              style="min-width: 19vw"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select
              clearable
              v-model="formInline.orderstatus"
              placeholder="缴费状态"
              style="min-width: 19vw; padding: 0px 0px 0px 10px"
              size="medium"
            >
              <el-option label="已缴费" :value="1"></el-option>
              <el-option label="未缴费" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              size="medium"
              icon="el-icon-search"
              style="width: 170px"
            >
              查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 170px"
              type="success"
              @click="derive"
              size="medium"
              icon="el-icon-document-copy"
            >
              全部导出</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 170px"
              type="primary"
              @click="reset"
              size="medium"
            >
              <i class="el-icon-refresh-left"></i>重置</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="texttable">
      <template>
        <el-table :data="tableData" style="width: 100%" border stripe>
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="parkname"
            label="车位名称"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="parkpay"
            label="车位金额"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="startdate"
            label="开始时间"
            align="center"
            :formatter="formatDate"
          >
          </el-table-column>
          <el-table-column
            prop="enddate"
            label="结束时间"
            align="center"
            :formatter="formatDate"
          >
          </el-table-column>
          <el-table-column
            prop="orderpay"
            label="应缴金额"
            align="center"
            :formatter="money"
          >
          </el-table-column>
          <el-table-column
            prop="orderstatus"
            label="缴费状态"
            align="center"
            :formatter="typeFormatter1"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.orderstatus"
                :active-value="1"
                :inactive-value="2"
                active-text="已缴费"
                inactive-text="未缴费"
                disabled
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button plain @click="open1(scope.row)">通知缴费</el-button>
              <el-button type="primary" plain @click="open2(scope.row, 'form')"
                >缴费详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- ========================================= -->
    <el-dialog title="车位订单通知" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
        <el-form-item
          label="开始时间"
          :label-width="formLabelWidth"
          prop="startdate"
        >
          <el-date-picker
            v-model="form.startdate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            :disabled="isFormDisabled"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="结束时间"
          :label-width="formLabelWidth"
          prop="enddate"
        >
          <el-date-picker
            v-model="form.enddate"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
            :disabled="isFormDisabled"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="应缴金额"
          :label-width="formLabelWidth"
          prop="orderpay"
        >
          <el-input
            v-model="form.orderpay"
            autocomplete="off"
            :disabled="isFormDisabled"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="缴费状态"
          :label-width="formLabelWidth"
          prop="orderstatus"
        >
          <el-select
            v-model="form.orderstatus"
            placeholder="请选择状态"
            style="width: 100%"
            :disabled="isFormDisabled"
          >
            <el-option label="已缴费" :value="1"></el-option>
            <el-option label="未缴费" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户回复" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            v-model="form.reply"
            :disabled="isFormDisabled"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >关 闭</el-button
        >
        <el-button v-if="flag" type="primary" @click="update('form')"
          >通 知</el-button
        >
        <el-button v-if="flag" type="primary" @click="open3('form')"
          >重置</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      flag: true,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      isFormDisabled: true,
      form: {},
      formInline: {},
      tableData: [],
      total: 0,
      currentPage: 1,
      pagesize: 10,
      //表单验证
      rules: {
        startdate: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        enddate: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        orderpay: [
          { required: true, message: "请输入应缴金额", trigger: "blur" },
        ],
        orderstatus: [
          { required: true, message: "请选择缴费状态", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 时间格式化
    formatDate(row, column, cellValue) {
      // 使用 moment 格式化时间
      if (cellValue) {
        return moment(cellValue).utc().format("YYYY-MM-DD HH:mm:ss");
      } else {
        return "暂无";
      }
    },
    // 金钱格式化
    money(row, column, cellValue) {
      if (cellValue) {
        return cellValue;
      } else {
        return "暂无";
      }
    },
    // 类型格式化 转为是否缴费
    typeFormatter1(row, column) {
      // console.log(row);
      let familystatus = row.orderstatus;
      if (familystatus == 1) {
        return "已缴费";
      } else {
        return "未缴费";
      }
    },
    // 数据获取 默认数据
    async getList() {
      console.log("获取数据");
      await this.$axios
        .get("/parking/getParkOrder", {
          params: {
            parkname: "",
            orderstatus: "",
            orderpay: "",
            pageNum: this.pagesize,
            currPage: this.currentPage - 1,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    // 查询
    onSubmit() {
      this.formInline2 = JSON.parse(JSON.stringify(this.formInline)); //深拷贝
      this.currentPage = 1;
      this.onSubmit2();
    },
    onSubmit2() {
      this.$axios
        .get("/parking/getParkOrder", {
          params: {
            ...this.formInline2,
            pageNum: this.pagesize,
            currPage: this.currentPage - 1,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    // 导出excel
    derive() {
      const tableData = this.tableData; // 如果表格数据为空，提示用户

      if (tableData.length === 0) {
        this.$message({
          type: "warning",
          message: "没有数据可以导出！",
        });
        return;
      } // 定义表头

      const headers = [
        "车位名称",
        "车位金额",
        "开始时间",
        "结束时间",
        "应缴金额",
        "缴费状态",
      ]; // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...tableData.map((item) => [
          item.parkname || "暂无", // 如果为空，填充为“暂无”
          item.parkpay || "暂无",
          item.startdate || "暂无",
          item.enddate || "暂无",
          item.orderpay || "暂无",
          item.orderstatus === 1
            ? "已缴费"
            : item.homestatus === 2
            ? "未缴费"
            : "未缴费", // 转换状
        ]),
      ]; // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData); // 创建工作簿

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1"); // 导出 Excel 文件

      XLSX.writeFile(workbook, "表格导出.xlsx"); // 提示导出成功

      this.$message({
        type: "success",
        message: "导出成功！",
      });
    },
    // 重置
    reset() {
      this.formInline2 = {};
      this.getList();
    },
    // 缴费通知
    open1(row) {
      this.flag = true;
      this.form = JSON.parse(JSON.stringify(row)); //深拷贝
      this.dialogFormVisible = true;
      this.isFormDisabled = false;
    },
    // 缴费详情
    open2(row, formName) {
      this.$refs[formName].resetFields();
      this.flag = false;
      console.log(row);
      this.form = row;
      this.dialogFormVisible = true;
      this.isFormDisabled = true;
    },
    open3(formName) {
      this.$refs[formName].resetFields();
      this.form = {};
    },
    // 通知
    update(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const startdate = moment(this.form.startdate).format(
            "YYYY-MM-DD+HH:mm:ss"
          );
          const enddate = moment(this.form.enddate).format(
            "YYYY-MM-DD+HH:mm:ss"
          );

          await this.$axios
            .post("/parking/editParkOrder", {
              u_id: this.form.id,
              startdate: startdate,
              enddate: enddate,
              orderpay: this.form.orderpay,
              orderstatus: this.form.orderstatus,
              note: this.form.note,
              token: sessionStorage.getItem("token"),
            })
            .then((res) => {
              console.log(res);
              this.$message({
                message: "通知成功",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.getList();
            });
        }
      });
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      if (this.formInline2) {
        this.onSubmit2();
      } else {
        this.getList();
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      if (this.formInline2) {
        this.onSubmit2();
      } else {
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.texttable {
  margin-top: 20px;
  border: 1px solid #ebeef5;
}
::v-deep .el-table .has-gutter tr th {
  background: rgb(238, 241, 246);
  color: rgb(31, 45, 61);
  border-color: rgb(223, 230, 236);
  font-size: 14px;
  text-align: center;
}
.page {
  display: flex;
  justify-content: right;
}
::v-deep .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
::v-deep .el-switch__label--right {
  z-index: 1;
  right: 19px;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {
  z-index: 1;
  left: 20px;
}
/*显示文字*/
::v-deep .el-switch__label.is-active {
  display: block;
}
::v-deep .el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 72px !important;
}

::v-deep .dialog {
  .dialog-footer {
    text-align: right;
  }
  .el-select {
    width: 100%;
  }
}
// .el-button .el-button--default .el-button--small .is-plain {
//   background-color: #ffffff00;
// }
.el-button--primary.is-plain,
.el-button--primary.is-plain {
  background-color: #ffffff00;
}
.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  color: #409eff;
}
</style>